<template>
    <div id=''></div>
</template>
<script lang='ts'>
export default {
    name: 'API',
}
</script>
<script lang='ts' setup>
import { ref, h, type Ref, isRef, reactive, isReactive, readonly, isReadonly, toRef, toRefs, unref, isProxy } from 'vue';
import { compileStyle } from 'vue/compiler-sfc';
const numC = 0;
const dataNumC: Ref<number> = ref(0);
const dataStr = ref<string>('鸿蒙开发');
const dataBool = ref<boolean>(true);
console.log(numC, dataNumC, dataStr, dataBool)

const state = reactive({ foo: 1, bar: 2 });
const fooRef = toRef(state, 'foo');
console.log(fooRef.value); //1
fooRef.value = 2;
console.log(state.foo, fooRef.value); //2

const numCtoref = toRef(numC);
console.log(numCtoref.value);
numCtoref.value = 100;
console.log(numC, numCtoref.value); //0,100


</script>
<style lang='scss'></style>
